<template>
  <ContentWrap :title="'售后信息'" class="!mb-10px">
    <template #header>
      <slot name="tool"> </slot>
    </template>
    <el-scrollbar>
      <el-row class="custom-text-14">
        <el-col :span="4">
          <div class="mb-15px">
            退款编号: <span class="ml-5px"> {{ orderData.no }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="mb-15px">
            申请时间: <span class="ml-5px"> {{ formatDate(orderData.auditTime!) }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="mb-15px">
            退款状态:
            <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="orderData.status" />
          </div>
        </el-col>

        <el-col :span="4">
          <div class="mb-15px">
            售后类型:
            <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_TYPE" :value="orderData.type" />
          </div>
        </el-col>
        <el-col :span="4">
          <div class="mb-15px">
            售后方式:
            <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="orderData.way" />
          </div>
        </el-col>
        <el-col :span="4">
          <div class="mb-15px">
            退款金额:
            <span class="ml-5px"> {{ fenToYuan(orderData.refundPrice!) }} 元</span>
          </div>
        </el-col>
        <el-divider border-style="dashed" class="mt-0! mb-15px!" />
        <el-col :span="4">
          <div>
            申请人员:
            <span class="ml-5px"> </span>
          </div>
        </el-col>
        <el-col :span="4">
          <div>
            退款原因:
            <span class="ml-5px"> {{ orderData.applyReason }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="mb-15px">
            补充描述:
            <span class="ml-5px"> {{ orderData.applyDescription }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            凭证图片:
            <span class="ml-5px">
              <el-image
                v-for="(item, index) in orderData.applyPicUrls"
                :key="index"
                :src="item.url"
                class="mr-10px h-60px w-60px border-rd-4px"
                @click="imagePreview(orderData.applyPicUrls)"
            /></span>
          </div>
        </el-col>
      </el-row>
    </el-scrollbar>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { fenToYuan } from '@/utils'
import { formatDate } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE } from '@/utils/dict'
import { createImageViewer } from '@/components/ImageViewer'
import { isArray } from '@/utils/is'

defineOptions({ name: 'OrderAInfo' })

defineProps({
  orderData: propTypes.object.def({})
})
/** 图片预览 */
const imagePreview = (args) => {
  const urlList = []
  if (isArray(args)) {
    args.forEach((item) => {
      urlList.push(item.url)
    })
  } else {
    urlList.push(args)
  }
  createImageViewer({
    urlList
  })
}
</script>
